import wxValidate from 'wechat-validate'

Page({
  data: {
    currentDate: new Date().getTime(),
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    houseList: [],
    repairItem: [],
    attachment: [],
    houseId: '',
    houseInfo: '',
    repairItemId: '',
    repairItemName: '',
    mobile: '',
    appointment: '',
    description: '',
  },
  behaviors: [wxValidate],
  rules: {
    houseId: [{ required: true, message: '请选择报修房屋!' }],
    repairItemId: [{ required: true, message: '请选择维修的项目!' }],
    mobile: [
      { required: true, message: '请填写手机号码!' },
      { pattern: /^1[3-8]\d{9}$/, message: '请填写正确的手机号码!' },
    ],
    appointment: [{ required: true, message: '请选择预约日期!' }],
    description: [{ required: true, message: '请填写问题描述!' }],
  },
  onLoad({ id }) {
    // 1. 调接口，获取可维修的房屋列表
    // 2. 调接口，获取维修的项目
    this.getHouseList()
    this.getRepairItems()
    id && this.getRepairDetail(id)
  },
  // 获取报修详情
  getRepairDetail(id) {
    wx.http.get(`/repair/${id}`).then((res) => {
      if (res.code !== 10000) return wx.utils.toast()
      this.setData({ ...res.data })
    })
  },
  getHouseList() {
    wx.http.get('/house').then((res) => {
      if (res.code !== 10000) return wx.utils.toast()
      this.setData({ houseList: res.data })
    })
  },
  getRepairItems() {
    wx.http.get('/repairItem').then((res) => {
      if (res.code !== 10000) return wx.utils.toast()
      this.setData({ repairItem: res.data })
    })
  },
  // 选择某个action
  onHouseSelected(ev) {
    // console.log(ev)
    const { id: houseId, name: houseInfo } = ev.detail
    this.setData({ houseId, houseInfo })
  },
  onRepairItemSelected(ev) {
    const { id: repairItemId, name: repairItemName } = ev.detail
    this.setData({ repairItemId, repairItemName })
  },
  // 用户选择了日期时间
  onDateSelected(ev) {
    const appointment = wx.utils.dateFormat(ev.detail) // 2022-10-01
    // 关闭 popup 弹框
    this.setData({ dateLayerVisible: false, appointment })
  },
  // 用户选择了图片
  onImageChoosed(ev) {
    const filePath = ev.detail.file.tempFilePath
    // 上传图像
    wx.utils.uploadImage(filePath).then((url) => {
      this.data.attachment.push({ url })
      this.setData({ attachment: this.data.attachment })
    })
  },
  // 移除图片
  deleteImage(ev) {
    this.setData({ attachment: this.data.attachment })
    this.data.attachment.splice(ev.detail.index, 1)
    this.setData({ attachment: this.data.attachment })
  },
  // 提交表单
  submitForm() {
    // 1. 表单的校验
    // 2. 调接口，发请求
    // 3. 提示用户，跳转到 报修列表
    if (!this.validate()) return
    const { houseId, repairItemId, mobile, appointment, description, attachment } = this.data
    const data = { houseId, repairItemId, mobile, appointment, description, attachment }
    wx.http.post('/repair', data).then((res) => {
      if (res.code !== 10000) return wx.utils.toast('提交报修失败')
      wx.utils.toast('提交报修成功')
      // 跳转到报修列表页面
      wx.redirectTo({
        url: '/repair_pkg/pages/list/index',
      })
    })
  },
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },

  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  goList() {
    wx.reLaunch({
      url: '/repair_pkg/pages/list/index',
    })
  },
})
